<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-alert title="添加商品信息" :closable="false" type="info" center show-icon></el-alert>
        <el-row>
            <el-col :span="16">
                <el-steps :active="active" finish-status="success">
                    <el-step title="基本信息"></el-step>
                    <el-step title="商品图片"></el-step>
                    <el-step title="上架时间"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>
            </el-col>
        </el-row>
        <el-form :model="addForm" :rules="addRules" ref="addFormRef">
            <el-tabs tab-position="left" v-model="activeTab" @tab-click="tabChangeHandle" :before-leave="beforeLeaveHandle">
                <el-tab-pane label="基本信息" name="0">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model="addForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input type="number" v-model.number="addForm.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input type="number" v-model.number="addForm.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input type="number" v-model.number="addForm.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="cate_id">
                        <el-cascader
                        v-model="selectedKeys"
                        :options="cateList"
                        :props="{ expandTrigger: 'hover' , value: '_id' , label : 'categoryname'  }"
                        clearable
                        @change="selectChange" style="width: 100%"></el-cascader>
                    </el-form-item>
                    <el-form-item label="商品品牌" prop="brand_id">
                        <el-select placeholder="请选择商品品牌" v-model="addForm.brand_id" style="margin-right:80%">
                            <el-option v-for="item in brandList" :key="item._id" :label="item.brandname" :value="item._id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name="1">
                    <el-upload :action="uploadAction" :headers="{authorization: token}" list-type="picture" :on-success="successHandle">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="上架时间" name="2">
                    <el-form-item>
                        <el-date-picker
                        v-model="addForm.add_time"
                        type="datetime"
                        placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="完成" name="3">
                    <el-button type="info" @click="$router.push('/goods')">取消</el-button>
                    <el-button type="primary" @click="addGood">添加</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-form>
    </el-card>
  </div>
</template>
<script>
// 改写完成按钮了
import {mapActions, mapState} from 'vuex'
export default {
    data(){
        return{
            // 当前激活的步骤条
            active:0,
            // 当前激活的标签页
            activeTab: '0',
            // 添加表单
            addForm: {
                goods_name : '',
                goods_price : '',
                goods_weight : '',
                cate_id :'',
                brand_id : '',
                is_del : 1,
                add_time : '',
                goods_small_logo:'',
                upd_time : '',
                goods_number:''
            },
            // 当前选中的分类的键
            selectedKeys: [],
            // 添加表单验证
            addRules: {
                goods_name:[{ required: true, message: '请输入商品名称', trigger: 'blur' }],
                goods_number:[{ required: true, message: '请输入商品数量', trigger: 'blur' }],
                goods_price: [{ required: true, message: '请输入商品价格', trigger: 'blur' }],
                goods_weight: [{ required: true, message: '请输入商品重量', trigger: 'blur' }],
                cate_id: [{ required: true, message: '请选择分类', trigger: 'blur' }],
                brand_id: [{ required: true, message: '请选择品牌', trigger: 'blur' }]
            },
            // 上传图片地址
            uploadAction:'http://localhost:3000/goods/upload',
            token : '' || window.sessionStorage.getItem('token')
        }
    },
    mounted(){
        this.getBrandData()
        this.getCateData()
    },
    methods:{
        // 映射
        ...mapActions('goodsAbout',['getBrandData','getCateData','addGoodData']),
        // 标签页切换时触发
        tabChangeHandle(){
            this.active = parseInt(this.activeTab)
            if (this.activeTab === '0'){
                this.getBrandData()
                this.getCateData()
            }
        },
        // 级联选择器选择内容发生改变时触发
        selectChange(){
            this.addForm.cate_id = this.selectedKeys[this.selectedKeys.length-1]
        },
        // tag标签页切换之前触发
        beforeLeaveHandle(newindex, oldindex){
            if (oldindex === '0' &&  !this.addForm.cate_id){
                this.$message.error('请选择分类')
                return false
            }else if (oldindex === '0' && !this.addForm.brand_id ){
                this.$message.error('请选择品牌')
                return false
            }
        },
        // 图片上传成功之后的回调
        successHandle(res){
            this.addForm.goods_small_logo = res
        },
        // 添加
        addGood(){
            this.$refs.addFormRef.validate(valid => {
                if (valid){
                    if (!this.addForm.add_time) return this.$message.error('请选择日期时间')
                    if (!this.addForm.goods_small_logo) return this.$message.error('请上传图片！')
                    this.addGoodData(this.addForm)
                    this.$router.push('/goods')
                }
            })   
        }
    },
    computed:{
        // 映射属性
        ...mapState('goodsAbout',['brandList','cateList'])
    }
}
</script>

<style scoped>
    .el-col{
        margin-left: 100px;
    }
</style>